<template>
  <div class="playerinfo">
    <div class="header">
      <table>
        <tr>
          <td>
            <span style="width: 60px">昵称：</span>
            <el-input
              v-model="nickname"
              placeholder="请输入玩家昵称"
            ></el-input>
          </td>
          <td>
            <span>UID：</span>
          </td>
          <td style="margin-left:-35px;">
            <el-input v-model="uid" placeholder="请输入玩家uid"></el-input>
          </td>
          <td>
            <el-button type="primary" @click="search()">查询</el-button>
          </td>
        </tr>
      </table>
    </div>
    <div class="content">
      <el-main v-loading="loading">
        <el-table
          border
          :header-cell-style="{
            color: '#333',
            fontFamily: 'MicrosoftYaHeiUI',
            fontWeight: 500,
            fontSize: '16px'
          }"
          :data="tableData"
          :fit="true"
        >
          <el-table-column
            prop="server_id"
            sortable 
            label="服务器"
          ></el-table-column>
          <el-table-column
            prop="uid" 
            sortable
            label="uid"
          ></el-table-column>
          <el-table-column
            prop="account"
            sortable 
            label="账号"
          ></el-table-column>
          <el-table-column
            prop="nickname" 
            sortable
            label="昵称"
          ></el-table-column>
          <el-table-column
            prop="reg_time"
            sortable
            :formatter="formatDate"
            label="注册时间"
          ></el-table-column>
          <el-table-column
            prop="login_time"
            sortable
            :formatter="formatDate"
            label="登陆时间"
          ></el-table-column>
          <el-table-column
            prop="logout_time"
            sortable
            :formatter="formatDate"
            label="登出时间"
          ></el-table-column>
          <el-table-column
            prop="total_recharge"
            sortable
            label="充值额度"
          ></el-table-column>
          <el-table-column
            prop="user_ip" 
            sortable
            label="IP"
          ></el-table-column>
          <el-table-column
            prop="user_level" 
            sortable
            label="等级"
          ></el-table-column>
          <el-table-column
            sortable
            prop="vip_level" 
            label="VIP"
          ></el-table-column>
          <el-table-column
            prop="diamond" 
            sortable
            label="钻石"
          ></el-table-column>
          <el-table-column
            prop="gold" 
            sortable
            label="金币"
          ></el-table-column>
          <el-table-column
            prop="power_value" 
            sortable
            label="战力"
          ></el-table-column>
        </el-table>
      </el-main>
    </div>
  </div>
</template>

<script>
import {formatDate} from '../../utils/index'
let map = new Map();
export default {
  name: "PlayerInfo",
  data() {
    return {
      tableData: [],
      uid: "",
      nickname: "",
      loading: false,
      formatDate:formatDate
    };
  },
  mounted() {
    //获取服务器名称
    this.$http.get("/api/gmtool/getServer").then((res) => {
      res.data.result.forEach((item) => {
        map.set(item.serverId, item.serverName);
      });
    });
  },
  methods: {
    //查询
    search() {
      if (this.uid == "" && this.nickname == "") {
        this.$message({ type: "warning", message: "请输入uid或昵称任意一个" });
        return;
      } else {
        this.loading = true;
        this.$http.post("/api/player/playerinfo", {
          uid: this.uid,
          nickname: this.nickname,
        }).then((res) => {
            var arr = [];
            if (res.data.result.length > 0) {
              res.data.result.forEach((item) => {
                var obj = {
                  server_id: map.get(item.server_id),
                  uid: item.uid,
                  account: item.account,
                  nickname: item.nickname,
                  reg_time: item.reg_time,
                  login_time: item.login_time,
                  logout_time: item.logout_time,
                  total_recharge: item.total_recharge.toFixed(2),
                  user_ip: item.user_ip,
                  user_level: item.user_level,
                  vip_level: item.vip_level,
                  diamond: item.diamond,
                  gold: item.gold,
                  power_value: item.power_value,
                };
                arr.push(obj);
              });
              this.tableData = arr;
              this.uid = "";
              this.nickname = "";
              this.loading = false;
            } else {
              this.$message({ type: "warning", message: "没有对应的数据" });
              this.uid = "";
              this.nickname = "";
              this.loading = false;
              return;
            }
          });
      }
    },
  },
};
</script>
<style scoped>
.playerinfo {
  width: 100%;
  height: auto;
  background-color: #fff;
}
.playerinfo td {
  padding: 18px;
  font-size: 14px;
  display: flex;
  float: left;
}
</style>>
